<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <TodoListHeater @addList="addList"></TodoListHeater>


    <!-- 主体部分 -->
    <TodoListBody :list="renderList" @modifyList="modifyList" @delList="delList" @changeAll= "changeAll" ></TodoListBody>


    <!-- 底部部分 -->
    <TodoListFooter :countList="countList" @clearList="clearList" :type="type" @changeType="changeType" :isShowList="isShowList"></TodoListFooter>

  </section>
</template>

<script>
import TodoListHeater  from './components/TodoListHeater.vue'
import TodoListBody  from './components/TodoListBody.vue'
import TodoListFooter from './components/TodoListFooter.vue'
export default {
  components: {
    TodoListHeater,
    TodoListBody,
    TodoListFooter, 
  },
  data() {
   return {
     list:[
      {id:1, name:'读万卷书',flag:false},
      {id:2, name:'行万里路',flag:false},
      {id:3, name:'吾日三省吾身',flag:true},
    ],
    type:'all'
   }

    
  },
  methods:{
    addList(value) {
      if(!value) return alert('内容不能为空')
      this.list = [...this.list,{
        id:+new Date(), 
        name:value,
        flag:false
      }]
    },

    // 修改功能
    modifyList(id, flag) {
     this.list.forEach(item => {
        if(item.id === id) {
          item.flag = flag
        }
      })
    },
    // 删除功能
    delList(id) {
      const obj = this.list.find(item => item.id === id)  
      if(!obj.flag) return alert('任务没有完成，不能删除哦')
      this.list = this.list.filter(item => item.id !==id)
    },
    // 全选
    changeAll(flag) {
      this.list = this.list.filter(item => item.flag = flag)
    },
     // 底部清除已完成的
    clearList() {
      this.list = this.list.filter(item => !item.flag)
    },
    // 筛选功能
    changeType(value) {
      this.type = value
    }
  },
  computed:{
    countList(){
        return this.list.filter(item => !item.flag).length
    },
    isShowList() {
      return this.list.some(item => item.flag)
    },
   
    renderList() {
      switch(this.type) {
        case 'all':
          return this.list
        case 'active':
          return this.list.filter(item => !item.flag)
        case 'completed':
          return this.list.filter(item => item.flag)
        default: return this.list
    }
  }
}
}
</script>

<style></style>
